<template>
    <van-sticky>
        <van-nav-bar
            title="邮箱认证"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        />
    </van-sticky>

    <div class="user">
        <div class="user-image">
            <img :src="business.avatar_cdn" />
        </div>
    </div>

    <van-form @submit="onSubmit">
        <van-field
            v-model="business.email"
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            readonly
            :rules="[
                { required: true, message: '请输入邮箱' },
                {
                    pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                    message: '邮箱格式不正确',
                },
            ]"
        />

        <van-field
            v-model="code"
            name="code"
            center
            clearable
            label="验证码"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请输入验证码' }]"
        >
            <template #button>
                <van-button
                    size="small"
                    type="primary"
                    @click="onSend"
                    :disabled="disabled"
                    >             
                    <van-count-down :time="time">
                        <template #default="timeData">
                            
                            <span class="block">{{ timeData.seconds }}</span>
                            <!-- <span class="block">{{ msg }}</span> -->
                        </template>
                     </van-count-down>
                    
                    </van-button
                >
            </template>    

        </van-field>

        <div style="width: 50%; margin: 2em auto">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
</template>

<script setup>

const time = ref(5000);

const { proxy } = getCurrentInstance();

const business = proxy.$business;
const code = ref('');
const disabled = ref(false);
const msg = ref('发送验证码');

const onSubmit = async (values) =>
{
    values.id = business.value.id;

    let result = await proxy.$http.post({
        url:'/business/email',
        params:values
    })

    if(result.code === 1)
    {
        proxy.$success({
            message:result.msg,
            onClose:() =>
            {
                onBack();
            }
        });
    }else{
        proxy.$warning(result.msg);
    }
}

const onSend = async () =>
{
    let params = {
        id: business.value.id,
        email: business.value.email
    }

    disabled.value = true;
    try {
        let result = await proxy.$http.post({
            url: '/business/send',
            params
        })

        if (result.code === 1) {

            CountDown();
            proxy.$success({

                // // 弹窗关闭回调函数中执行
                // onClose: () => {
                //     CountDown();
                // },
                message: result.msg,
            });
        } else {
            proxy.$warning(result.msg);
        }
    } catch (error) {
        // 处理网络错误或其他异常情况
        proxy.$error('网络请求失败，请稍后再试或检查您的网络连接。');
        disabled.value = false; // 如果有需要，重新启用按钮
    }
}

const CountDown = () =>
{
    let time = 5;
    
    let T = setInterval(() => {

        if(time === 1)
        {
            msg.value = '重新发送验证码';

            disabled.value = false;

            clearInterval(T);

            return false;
        }

        time--;

        msg.value = `${time}秒`;

        
    },1000);
}

const onBack = () => proxy.$router.back();

</script>

<style scoped>
@import url('/assets/css/BusinessProfile.css');
</style>